<template>
  <el-row>
    <el-row style="min-width:1300px">
      <el-form :model="formInline" class="search_prod" label-width="120px">
        <el-form-item label="会员账号">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="会员账号" v-model="formInline.username"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">手机号&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="手机号" v-model="formInline.tel"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">所属等级&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select v-model="formInline.rating" clearable size="small" placeholder="请选择会员等级">
                <el-option
                  v-for="item in rating"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="用户昵称" v-model="formInline.nickname"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">所属省市&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <city-cascader :level="3" :checkStrictly="true" @change="handleItemChange" />
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">会员状态&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select v-model="userStatus" clearable size="small" placeholder="请选择会员状态">
                <el-option
                  v-for="item in userStatu"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-col :span="4">
            <el-col :span="22" class="search_time_width">
              <el-date-picker
                style="width:100%"
                v-model="createTime"
                type="datetimerange"
                size="small"
                align="right"
                unlink-panels
                clearable
                value-format="timestamp"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
              ></el-date-picker>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">最后下单时间&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="22" class="search_time_width">
              <el-date-picker
                style="width:100%"
                v-model="orderteTime"
                type="datetimerange"
                size="small"
                align="right"
                clearable
                unlink-panels
                value-format="timestamp"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
              ></el-date-picker>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">排序&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select v-model="formInline.order_sn" clearable size="small" placeholder="请选择">
                <el-option
                  v-for="item in order_sn"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="交易额" v-if="is_open.xnbkj && is_open.xnbkj.is_open  != 0">
          <el-col :span="4" class>
            <el-col :span="7" class="search_small_input_width">
              <el-input v-Int type="text" size="small" clearable v-model="formInline.zxf_begin"></el-input>
            </el-col>
            <el-col :span="2" class>-</el-col>
            <el-col :span="7" class="search_small_input_width">
              <el-input v-Int type="text" size="small" clearable v-model="formInline.zxf_end"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">交易量&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4" class>
            <el-col :span="7" class="search_small_input_width">
              <el-input v-Int type="text" size="small" clearable v-model="formInline.zcdd_begin"></el-input>
            </el-col>
            <el-col :span="2" class>-</el-col>
            <el-col :span="7" class="search_small_input_width">
              <el-input v-Int type="text" size="small" clearable v-model="formInline.zcdd_end"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">星球等级&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select
                v-model="formInline.coin_rating"
                clearable
                size="small"
                placeholder="请选择会员等级"
              >
                <el-option
                  v-for="item in coin_rating"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="登录IP">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="登录IP" v-model="formInline.last_ip"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">注册IP&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="注册IP" v-model="formInline.reg_ip"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">用户&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select v-model="formInline.types" clearable size="small" placeholder="请选择">
                <el-option
                  v-for="item in agentOptions"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="查询下级">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="请输入帐号" v-model="formInline.t_username"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">查询上级&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" placeholder="请输入帐号" v-model="formInline.u_username"></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3">层级&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input size="small" tpye="Number" placeholder="请输入层级" v-model="formInline.level"></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row class="tl">
            <el-col :span="24">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="subOrderInfo"
              >查询</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="delOrderInfo"
              >一键清除</el-button>

              <el-button
                :loading="$store.state.isLoading"
                @click="export_user()"
                type="primary"
                size="mini"
              >会员导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </el-row>
</template>
<script>
import cityCascader from "@/components/currency/cityCascader/cityCascader";
export default {
  name: "productSearch",
  props: {
    toUp: [String],
    down: [String]
  },
  data() {
    return {
      is_open: { xnbkj: "" },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      agentOptions: [
        { id: "1", title: "普通会员" },
        { id: "2", title: "供应商" },
        { id: "3", title: "代理商" }
      ],
      userStatu: [
        { id: "0", title: "未激活" },
        { id: "1", title: "已激活" },
        { id: "2", title: "没有上级" }
      ],
      userStatus: "",
      order_sn: [
        { id: "1", title: "按积分排序" },
        { id: "2", title: "按消费金额" },
        { id: "3", title: "按下级会员数" },
      ],
      createTime: [],
      orderteTime: [],
      rating: [],
      coin_rating: [],
      formInline: {
        username: "",
        rating: "",
        coin_rating: "",
        nickname: "",
        province: "",
        city: "",
        area: "",
        town: "",
        tel: "",
        show: "",
        tid: "",
        order_sn: "",
        created_time_begin: "",
        created_time_end: "",
        last_oid_time_begin: "",
        last_oid_time_end: "",
        types: "",
        t_username: "",
        u_username: "",
        level: ""
      },
      regionList: [],
      regionProps: {
        value: "y",
        label: "t",
        children: "z"
      },
      op: []
    };
  },
  components: {
    cityCascader
  },
  mounted() {
    this.is_open = JSON.parse(localStorage.getItem("limit"));
  },
  methods: {
    export_user() {
      var params = JSON.parse(JSON.stringify(this.formInline));
      this.$fnc.postExcelFile(params, "/api/admin/export/excel_out_user");
    },
    handleItemChange(val) {
      val = val || [];
      this.formInline.province = val[0] || "";
      this.formInline.city = val[1] || "";
      this.formInline.area = val[2] || "";
      this.formInline.town = val[3] || "";
    },
    delOrderInfo() {
      this.formInline = {
        username: "",
        rating: "",
        coin_rating: "",
        nickname: "",
        province: "",
        city: "",
        area: "",
        town: "",
        tel: "",
        show: "",
        tid: "",
        order_sn: "",
        created_time_begin: "",
        created_time_end: "",
        last_oid_time_begin: "",
        last_oid_time_end: "",
        types: "",
        t_username: "",
        level: ""
      };
      this.$emit("sendUserSearch", this.formInline);
    },
    subOrderInfo() {
      this.$emit("sendUserSearch", this.formInline);
    },
    getRatingList() {
      var params = {};
      params.parent_id = "0";
      this.$api.getUser.getRatingList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.rating = res.data.result;
        }
      });
    },
    getCoinRatting() {
      this.$api.getCoin.getCoinGrade({}).then(res => {
        if (res.data.code == 200) {
          this.coin_rating = res.data.result;
        }
      });
    }
  },
  created() {
    this.getRatingList();
    this.getCoinRatting();
  },
  watch: {
    down(val) {
      if (val) {
        for (var i in this.formInline) {
          if (i == "t_username") {
            this.formInline.t_username = val;
          } else {
            this.formInline[i] = "";
          }
        }
      }
    },
    toUp(val) {
      if (val) {
        for (var i in this.formInline) {
          if (i == "u_username") {
            this.formInline.u_username = val;
          } else {
            this.formInline[i] = "";
          }
        }
      }
    },
    createTime(val) {
      if (val != null) {
        this.formInline.created_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.created_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.created_time_begin = "";
        this.formInline.created_time_end = "";
      }
    },
    orderteTime(val) {
      if (val != null) {
        this.formInline.last_oid_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.last_oid_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.last_oid_time_begin = "";
        this.formInline.last_oid_time_end = "";
      }
    },

    userStatus(val) {
      if (val == "0") {
        this.formInline.show = "0";
        this.formInline.tid = "";
      } else if (val == "1") {
        this.formInline.show = "1";
        this.formInline.tid = "";
      } else {
        this.formInline.tid = 0;
        this.formInline.show = "";
      }
    }
  }
};
</script>
<style lang="less" scoped>
.search_prod {
  padding: 10px 20px 0;
  > .el-form-item {
    margin-bottom: 0 !important;
  }
}
.top_weiy {
  position: relative;
  top: -1px;
}
.xz {
  transform: rotate(-90deg);
}
.xzz {
  transform: rotate(90deg);
}
.open_order_search {
  margin-top: 10px;
  span {
    font-size: 13px;
    color: #666;
    cursor: pointer;
  }

  span:hover {
    color: #118bd8 !important;
  }
}
.open_con {
  overflow: hidden;
  transition: all 0.3s linear;
}
</style>
